<template>
    <view class="i-class i-message i-message-{{type}} {{ visible ? 'i-message-show' : '' }}">
        {{ content }}
    </view>
</template>

<script>
export default {
    name: 'Message',
    props: {
        duration: {
            type: [String, Number],
            default: 2
        },
        type: {
            type: String,
            default: 'default',
            validator(value){
                return ['default', 'success', 'warning', 'error'].includes(value)
            }
        }
    },
    data(){
        return {
            visible: false,
            content: '',
        }
    }
}
</script>

<style>
.i-message {
    display: block;
    width: 100%;
    min-height: 32px;
    line-height: 2.3;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #2d8cf0;
    color: #fff;
    text-align: center;
    font-size: 14px;
    z-index: 1010;
    opacity: 0;
    -webkit-transform: translateZ(0) translateY(-100%);
    transition: all .4s ease-in-out;
    &-show {
        -webkit-transform: translateZ(0) translateY(0);
        opacity: 1;
    }
    &-default {
        background: #2d8cf0;
    }
    &-success {
        background: #19be6b;
    }
    
    &-warning {
        background: #f90;
    }
    
    &-error {
        background: #ed3f14;
    }
}




    
</style>
